 <template>
 	<view class="container">
 		<view class="item">
			<view class="icon">
				<u-image width="100%" height="2rpx" :src="getServerStatic('/static/images/line.png')" ></u-image>
			</view>
 			<view style="width: 100%;">
 				<view class="user-info-box">
 					<view class="user-info">
 						<view class="name">漳大校</view>
 						<view class="name">15012349999</view>
 					</view>
 				</view>
 				<view class="address">
 					辽宁省 沈阳市 浑南区 浦江东方大厦2006室
 				</view>
 			</view>
 		</view>

 		<view class="order-item">
 			<view class="commodity-box">
 				<view class="left">
 					<u-image width="170rpx" height="155rpx" src="/static/logo.png"></u-image>
 				</view>
 				<view class="right">
 					<view class="com-title">四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙</view>
 					<view class="sku-box">规格：超实惠套装1200g</view>
 					<view class="count-box">购买数量：3件</view>
 				</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item">
 					<text>商品总计</text>
 					<text>￥555.22</text>
 				</view>
 				<view class="content-item">
 					<text>抵扣券</text>
 					<text>减30元</text>
 				</view>
 				<view class="content-item">
 					<text>配送方式</text>
 					<text>到店自提</text>
 				</view>
				<view class="content-item">
					<text>运费</text>
					<text>--</text>
				</view>
 			</view>

			<view class="all-price-box">
				<view class="">合计</view>
				<view class="price">￥525.22</view>
			</view>
 		</view>

		<!-- 订单信息 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">订单信息</view>
			</view>
			<view class="content-box">
				<view class="content-item">
					<text>订单编号</text>
					<view class="">
						<text>zld2368946797167</text>
						<text class="copy">复制</text>
					</view>
				</view>
				<view class="content-item">
					<text>下单时间</text>
					<text>2024-05-26 12:03:23</text>
				</view>
				<view class="content-item">
					<text>支付方式</text>
					<text>微信支付</text>
				</view>
				<view class="content-item">
					<text>付款时间</text>
					<text>--</text>
				</view>
				<view class="content-item">
					<text>发货时间</text>
					<text>--</text>
				</view>
				<view class="content-item">
					<text>收货时间</text>
					<text>--</text>
				</view>
			</view>
		</view>

		<!-- 申请说明 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">申请说明</view>
				<view class="tip">您还可以输入200字</view>
			</view>
			<view class="content-box">
				<u--textarea height="200rpx" border="none" v-model="content" placeholder="请填写申请说明" ></u--textarea>

				<view class="upload-box" @tap="chooseImage">
					<u-image width="200rpx" height="200rpx" src="/static//images/upload.png"></u-image>
				</view>
			</view>
		</view>

		<!-- 寄回订单号 -->
		<view class="order-item">
			<view class="status-box default">
				<view class="name">寄回订单号</view>
				<view class="">
					<u--input inputAlign="right" placeholder="请输入订单号" v-model="orderNo"
						border="none"></u--input>
				</view>
			</view>
		</view>

		<view class="btn">
			<u-button throttleTime="1000"
				:customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false"
				type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="applyConfirm"
				>提交申请</u-button>
		</view>
 	</view>


 </template>

 <script setup>
 	import {getServerStatic} from "@/utils/tool";

    const orderStatus = ref(0)
 	const content = ref('')
	// 寄回订单号
	const orderNo = ref('')
 	onLoad(({
 		status
 	}) => {
 		orderStatus.value = status
 		uni.setNavigationBarTitle({
 			title: status == 0 ? '申请退货退款' : status == 1 ? '申请退款' : '申请换货'
 		})
 	})

	const chooseImage = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
					}
				});
			}
		});
	}

 	const goAddressList = () => {
 		uni.navigateTo({
 			url: '/mine/address/list?name=1'
 		})
 	}

	const applyConfirm = () => {
		uni.navigateBack()
	}
 </script>

 <style lang="scss" scoped>
 	.container {
 		padding: 30rpx 26rpx 100rpx;
 	}

 	.item {
		position: relative;
 		@include between(100%);
 		margin-bottom: 40rpx;
 		padding: 34rpx 38rpx;
 		background: #FFFFFF;
 		border-radius: 20rpx 20rpx 0 0;
		.icon {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 3;
		}
		.user-info-box {
			@include between(100%);
			.user-info {
				@include start();
				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin-right: 26rpx;
				}
			}
		}

 		.address {
 			margin-top: 24rpx;
 			font-size: 28rpx;
 			color: #000000;
 		}
 	}

 	.order-item {
 		margin-bottom: 30rpx;
 		padding: 38rpx 38rpx 1rpx;
 		background: #FFFFFF;
 		border-radius: 30rpx;

 		.address-box {
 			@include between(100%);
 			color: #000000;
 			font-size: 26rpx;
 			margin-bottom: 12rpx;

 		}

 		.last {
 			margin-top: 12rpx;
 		}

 		.status-box {
			@include between(100%);
 			padding-bottom: 32rpx;
 			border-bottom: 1rpx solid #E8E8E8;
 			margin-bottom: 30rpx;

 			.name {
 				font-size: 30rpx;
 				font-weight: bold;
 				color: #000000;
 			}
			.tip {
				color: #999999;
			}

 			.status {
 				color: #D66A44;
 			}

 			.status1 {
 				color: #AAAAAA;
 			}
 		}
		.default {
			padding-bottom: 0;
			border-bottom: none;
			// justify-content: flex-start;
			.name {
				margin-right: 36rpx;
			}
		}
		.commodity-box {
			@include between(100%, 100%);
			margin-bottom: 28rpx;
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #F5F5F5;
			.right {
				flex: 1;
				margin-left: 22rpx;
				@include between(100%, 170rpx);
				flex-direction: column;
				align-items: flex-start;
				padding: 10rpx 0;
				color: #000000;
				font-size: 30rpx;
				.com-title {
					@include over-ellip(450rpx);
					font-weight: bold;
				}
			}
		}

 		.content-box {
 			width: 100%;
 			position: relative;
 			font-size: 26rpx;
 			color: #606672;
			.upload-box {
				margin-top: 30rpx;
				padding-bottom: 30rpx;
			}

 			.content-item {
 				@include between(100%);
 				margin-bottom: 30rpx;
 				font-size: 28rpx;
 				color: #000000;

 				&>text {
 					&:nth-child(2) {
 						color: #312C2A;
 					}
 				}
				.copy {
					display: inline-block;
					margin-left: 22rpx;
					color: #516DDB;
					font-size: 30rpx;
				}
 			}

 			.icon {
 				position: absolute;
 				bottom: 0;
 				right: 0;
 				z-index: 99;
 			}
 		}

		.all-price-box {
			@include between(100%);
			font-size: 28rpx;
			color: #000000;
			padding-top: 26rpx;
			padding-bottom: 30rpx;
			border-top: 1rpx solid #f5f5f5;
			.price {
				font-size: 34rpx;
				color: #F55726;
			}
		}

 		.btns-box {
 			padding-top: 32rpx;
 			border-top: 1rpx solid #E8E8E8;
 			margin-top: 30rpx;
 			@include between(100%);

 			.message {
 				font-size: 26rpx;
 				color: #D66A44;
 			}
 		}

 	}
	.btn {
		padding: 0 30rpx;
		margin-top: 73rpx;
		width: 100%;
	}
 </style>
